依存関係

• Shopify CLI: Shopify テーマの開発と管理に役立つコマンドライン インターフェイス ツール。
• TailwindCSS: カスタム デザインを迅速に構築するためのユーティリティ優先の CSS フレームワーク。

設定

Tailwind をスタンドアロン CLI ツールとして使用しています。詳細については、公式ガイドを参照してください。

注: Intel プロセッサを搭載した Mac でこれを設定している場合は、以下のコマンドで macos-arm64 を macos-x64 に置き換えてください。

1. ARM64 アーキテクチャの macOS 用の最新の TailwindCSS バイナリをダウンロードします:

   curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64

2. ダウンロードしたファイルを実行可能にする:

   chmod x tailwindcss-macos-arm64

3. 実行可能ファイルをより便利な名前に移動します:

   mv tailwindcss-macos-arm64 tailwindcss

4. TailwindCSS ウォッチャーを実行します:

   • このコマンドは、TailwindCSS ソース ファイル (./assets/tailwind.css) 内の変更を監視し、出力を目的の CSS ファイル (./assets/style.css) にコンパイルします。

     ./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --watch

公開

実稼働用に CSS をコンパイルする準備ができたら、次のコマンドを使用して CSS を縮小する必要があります:

./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --minify

このコマンドは、入力 CSS ファイル (./assets/tailwind.css) を取得し、TailwindCSS で処理し、実稼働用に最適化された縮小 CSS ファイル (./assets/style.css) を出力します。

結論

これらの手順に従って、TailwindCSS をスタンドアロン CLI ツールとして正常にセットアップし、プロジェクトに統合しました。この設定により、Tailwind のユーティリティ優先のアプローチを使用して CSS を効率的に開発および管理できます。ウォッチャーを実行すると、開発中に CSS が自動的にコンパイルされ、縮小ステップによって CSS が運用環境に向けて準備され、パフォーマンスが最適化されます。この合理化されたプロセスにより、クリーンで保守しやすいコードベースが維持され、Shopify テーマの構築とカスタマイズに簡単に集中できるようになります。